<template>
	<view class="box" v-if="is==0">
		<u-popup v-model="show" mode="bottom" width="90%" height="600" borderRadius="54">
			<view class="d_f j_c_c a_i_c f_d_c">
				<view class="title">
					请输入购买手机号进行登录
				</view>

				<view style="margin-top: 50rpx;">
					<u-field v-model="mobile" label="手机号" placeholder="请填写手机号" maxlength="11" type="number">
					</u-field>
					<u-field v-model="code" label="验证码" placeholder="请填写验证码" type="number" maxlength="6">
						<u-button size="mini" slot="right" type="primary" @click="getCode" shape="circle"
							:disabled="disabled">{{getCodeText}}
						</u-button>
					</u-field>
				</view>
				<image src="https://web.78keji.cn/images/ljj/logins.png" mode="widthFix"
					style="600rpx;margin-top: 40rpx;" @click="login">
				</image>
			</view>


		</u-popup>
		<u-popup v-model="showx" mode="center" width="90%" :mask-close-able='false'>

			<image src="https://web.78keji.cn/images/ljj/zfb.png" mode="widthFix"
				style="width: 100%;position: relative;"></image>

			<view class="" style="width: 100%;position: absolute;top: 30rpx;">
				<view class="d_f j_c_c" style="color: #2A63D9;font-size: 36rpx;">
					确认到账支付宝账号
				</view>
				<view class="d_f j_c_c" style="width: 100%;margin-top: 48rpx;">
					<view class="d_f a_i_c "
						style="border: 1px solid #B3B3B3;width: 560rpx;height: 80rpx;border-radius: 40rpx;padding: 0 23rpx;">
						<image src="https://web.78keji.cn/images/ljj/icon.png" mode="widthFix" style="width: 43rpx;">
						</image>
						<view class="" style="width: 1rpx;
height: 40rpx;border-right: 1px solid #999999;margin-left: 12rpx;">

						</view>
						<input type="number" placeholder="请输入领取支付宝账号" style="margin-left: 12rpx;" v-model="content">
					</view>
					<!-- 	<u-input v-model="content" type="text" placeholder-style="color:#B3B3B3" :border="border"
						style="width: 536rpx;margin: 0 auto;" /> -->
				</view>
				<view class="d_f j_c_c">
					<image src="https://web.78keji.cn/images/ljj/zgbbt.png" mode="widthFix"
						style="width:536rpx;margin-top: 30rpx;" @click="viplingqu"></image>
				</view>

			</view>
			<view class="d_f j_c_c">
				<image src="https://web.78keji.cn/images/ljj/quxiao.png" mode="widthFix" style="width: 68rpx;"
					@click="showx=false"></image>
			</view>


		</u-popup>
		<u-popup v-model="shows" mode="center" width="90%" :mask-close-able='false'>

			<view class="">
				<image src="https://web.78keji.cn/images/ljj/yhtop.png" mode="widthFix"
					style="width: 100%;position: relative;"></image>
				<view class="" style="position: absolute;top: 250rpx;padding: 20rpx;">
					<u-radio-group v-model="value" :wrap='true'>
						<u-radio v-for="(item, index) in listx" :key="index" :name="item.id">

							{{item.name}}
						</u-radio>

					</u-radio-group>
					<view class="" style="width: 100%;text-align: center;margin-top: 70rpx;">
						<image src="https://web.78keji.cn/images/ljj/qd.png" style="width: 580rpx;height: 88rpx;"
							@click="lingqus"></image>
					</view>

				</view>
				<view class="d_f j_c_c">
					<image src="https://web.78keji.cn/images/ljj/quxiao.png" mode="widthFix" style="width: 68rpx;"
						@click="shows=false">
					</image>
				</view>


			</view>

		</u-popup>
		<view class="yk"
			style="position: fixed;top: 280rpx;width: 100%;text-align: center;left: 0;background-color: #FAFAFA;z-index: 9;height: 80rpx;line-height: 80rpx;">
			喜马拉雅
		</view>
		<view class="" style="position: fixed;right: 0;left: 0;z-index: 1;top: 0;">
			<image src="https://web.78keji.cn/images/ljj/tops.png" mode="widthFix" style="width: 100%;"></image>
			<view class="d_f a_i_c" style="position: absolute;top: 48rpx;left:30rpx ;">
				<image src="https://web.78keji.cn/images/ljj/user.png" mode="widthFix" style="width: 98rpx;"></image>
				<view class="" style="margin-left: 22rpx;" v-if="openid">
					<view class="" style="color: white;font-size: 32rpx;">
						{{mobile}}
					</view>
					<view class="" style="color: #FFFFFF;font-size: 24rpx;margin-top: 10rpx;">
						省心联合会员，立减金领取

						</image>
					</view>

				</view>

				<view class="" style="margin-left: 22rpx;" v-else>
					<view class="" style="color: white;font-size: 32rpx;" @click="show=true">
						请登录领取…
					</view>
					<view class="" style="color: #FFFFFF;font-size: 24rpx;margin-top: 10rpx;">
						省心联合会员，立减金领取

					</view>
				</view>
				<image src="https://web.78keji.cn/images/ljj/change.png" mode="widthFix"
					style="width: 90rpx;margin-left: 200rpx;" @click="loginout" v-if="openid">
					<!-- 	<image src="https://web.78keji.cn/images/ljj/login.png" mode="widthFix" style="width: 130rpx;margin-left: 125rpx;"
						@click="show=true" v-else> -->
					<u-button open-type="getPhoneNumber" @getphonenumber="getphonenumber" size="mini" type="primary"
						style="width: 160rpx;margin-left: 125rpx;" v-else>一键登录</u-button>
				</image>

			</view>

		</view>

		<view class="" v-if="openid" style="padding-top: 342rpx;">



			<view class="">
				<view class="" v-if="!openid||tldata.length==0">
					<view class="d_f j_c_c">
						<image src="https://web.78keji.cn/images/ljj/no.png" mode="widthFix"
							style="width: 273rpx;margin-top: 143rpx;">
						</image>

					</view>
					<view class="d_f j_c_c" style="color: #808080;font-size: 24rpx;">
						暂无立减金
					</view>
				</view>

				<view class="" v-else>

					<view class="" style="margin-top: 48rpx;">

						<view v-for="(item,index) in tldata" :key="index"
							:class="index==tldata.length-1?'boss1':'boss'">

							<view class="" v-if="item.status==0||item.status==7"
								style="padding-bottom: 10rpx;background-color: #FAFAFA;">

								<image src="https://web.78keji.cn/images/ljj/su.png" mode="widthFix"
									style="width: 100%;"></image>
								<view class="d_f" style="position: absolute;top: 0rpx;left: 30rpx;">
									<view class="d_f " style="color: #FFFFFF;font-weight: 800;">
										<view class="unit">
											￥
										</view>

										<view class="money">
											{{item.money}}
										</view>

									</view>
									<view class="" style="margin-left: 70rpx;margin-top: 30rpx;">
										<view class="" style="text-align: left;color: #232323;font-weight: bold;">
											通用立减金
										</view>
										<view class=""
											style="text-align: left;font-size: 16rpx;color: #0F0F0F;margin-top: 13rpx;">
											有效期{{item.starttime}}-{{item.endtime}}
										</view>
									</view>
									<view class="d_f j_c_c a_i_c" style="margin-left: 64rpx;">
										<image src="https://web.78keji.cn/images/ljj/nolinqu.png" mode="widthFix"
											style="width: 100rpx;" v-if="item.status==0" @click="viplq(item)"></image>

										<image src="https://web.78keji.cn/images/ljj/timeno.png" mode="widthFix"
											style="width: 100rpx;" v-if="item.status==7"></image>

									</view>
								</view>
							</view>
							<view class=""
								v-if="item.status==2||item.status==1||item.status==3||item.status==4||item.status==5||item.status==6"
								style="padding-bottom: 10rpx;background-color: #FAFAFA;">
								<image src="https://web.78keji.cn/images/ljj/err.png" mode="widthFix"
									style="width: 660rpx;"></image>
								<view class="d_f" style="position: absolute;top: 0rpx;left: 30rpx;">
									<view class="d_f " style="color: #9A9A9A;font-weight: 800;">
										<view class="unit">
											￥
										</view>
										<view class="money">
											5
										</view>

									</view>
									<view class="" style="margin-left: 70rpx;margin-top: 30rpx;">
										<view class="" style="text-align: left;color: #9A9A9A;font-weight: bold;">
											通用立减金
										</view>
										<view class=""
											style="text-align: left;font-size: 16rpx;color: #9A9A9A;margin-top: 13rpx;">
											有效期{{item.starttime}}-{{item.endtime}}
										</view>
									</view>
									<view class="d_f j_c_c a_i_c" style="margin-left: 64rpx;">

										<view class="" style="color: #5EBB72;font-size: 24rpx;width: 96rpx"
											v-if="item.status==1">
											领取成功
										</view>
										<view class="" style="color: #5EBB72;font-size: 24rpx;width: 96rpx"
											v-if="item.status==3">
											发券成功
										</view>
										<view class="" style="color: #E8593F;font-size: 24rpx;width: 96rpx"
											v-if="item.status==2">
											发券失败
											<view class="cx" @click="viplq(item)">
												重领
											</view>
										</view>
										<view class="" style="color: #E8593F;font-size: 24rpx;width: 96rpx"
											v-if="item.status==5">
											领取失败
											<view class="cx" @click="viplq(item)">
												重领
											</view>
										</view>
										<view class=""
											style="color: #999999;font-size: 24rpx;width: 96rpx;text-align: center;"
											v-if="item.status==4">
											已核销
										</view>
										<view class=""
											style="color: #999999;font-size: 24rpx;width: 96rpx;text-align: center;"
											v-if="item.status==6">
											已到期
										</view>


									</view>
								</view>
							</view>

						</view>
					</view>
				</view>
				<view class="" style="height: 266rpx;">

				</view>
				<view class="" v-if="current==1"
					style="height: 266rpx;color: #DB202D;font-size: 24rpx;width: 100%;text-align: center;position: fixed;bottom: 0;background-color: #FAFAFA;z-index: 9999;padding-top: 88rpx;">
					*<text style="color: #333333;">购买成功开始，每5天生成1张立减金（6张/期）</text>
				</view>
				<view v-if="current==2" class=""
					style="height: 266rpx;color: #DB202D;font-size: 24rpx;width: 100%;text-align: center;position: fixed;bottom: 0;background-color: #FAFAFA;z-index: 9999;padding: 88rpx 73rpx 0 73rpx;">
					*<text
						style="color: #333333;">订购即下发6张1元(共计6元)；第二个月可领1张2元及1张5元立减金(共计7元)；第三个月可领1张2元立减金。（每张立减金领取后有效期为7天）</text>
				</view>
				<view v-if="current==3" class=""
					style="height: 266rpx;color: #DB202D;font-size: 24rpx;width: 100%;text-align: center;position: fixed;bottom: 0;background-color: #FAFAFA;z-index: 9999;padding: 88rpx 73rpx 0 73rpx;">
					*<text style="color: #333333;">购买成功开始，每5天生成1张微信/立减金(6张/期)</text>
				</view>

			</view>
		</view>
		<view class="" v-else style="width: 100%;text-align: center;padding-top: 390rpx;">
			<image src="https://web.78keji.cn/images/ljj/nologin.png" mode="widthFix" style="width:243rpx;"></image>
			<view class="" style="color: #808080;font-size: 24rpx;margin-top: 20rpx;">
				请登录领取
			</view>
		</view>




	</view>
</template>

<script>
	import {
		sendSms,
		checkSms,
		ljjList,
		wxLogin,
		ljjLq,
		getProType,
		getPhone,
		wxLogins,
		getshenhe
	} from '../../api/index.js'
	import moment from '../../utils/moment.js'
	export default {
		data() {
			return {
				is: "",
				content: '',
				border: true,
				showx: false,
				listx: [

					{
						name: '工商银行微信立减金',
						id: '1931'
					},
					{
						name: '招商银行微信立减金',
						id: '3008'
					},
					{
						name: '农业银行微信立减金',
						id: '3009'
					},
					{
						name: '建设银行微信立减金',
						id: '3010'
					},
					{
						name: '中国银行微信立减金',
						id: '3011'
					},

				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				value: '',
				shows: false,
				list: [{
					name: '优酷视频'
				}, ],
				current: 3,
				mobile: "",
				show: false,
				code: "",
				getCodeText: '获取验证码',
				getCodeBtnColor: "#ffffff",
				getCodeisWaiting: false,
				disabled: false,
				openid: "", //是否登录
				proType: '',
				xmlydata: [],
				tldata: [],
				ljjid: "", //立减金id
				idx: "", //省心会员券id


			}
		},
		components: {

		},
		methods: {
			add(item) {
				this.shows = true
				this.ljjid = item
			},
			getphonenumber(e) {
				if (e.detail.errMsg === "getPhoneNumber:ok") {
					//这里受机型与模拟器影响，errmsg信息各不相同，只能判断用户是否点击了允许按钮来判断，
					getPhone({
						openid: uni.getStorageSync('openidHF'),
						code: e.detail.code
					}).then((res) => {
						console.log(res)
						uni.setStorageSync('openid', res.data.openid)
						uni.setStorageSync('mobile', res.data.mobile)
						this.openid = uni.getStorageSync('openid')
						this.mobile = uni.getStorageSync('mobile')
						this.getdata()

					})
					// code...
				} else {
					//如果没有走以上，均为点击了拒绝授权
					console.log('用户拒绝授权')
					// 通常会在这里弹出模态框，引导用户点击允许授权
				}

				//调用自己后台接口获取手机号
			},
			viplq(item) {
				console.log()

				this.idx = item.id
				this.shows = true



			},
			//支付宝领取
			viplingqu() {
				uni.showLoading({
					title: '领取中，请稍等',
					mask: true
				});
				ljjLq({
					openid: this.openid,
					type: 3,
					id: this.idx,
					account: this.content,
					accountType: 1,
					bankType: 2

				}).then((res) => {
					uni.showToast({
						title: res.msg,
						icon: "none"
					}); //弹出提示框
					this.showx = false
					this.getdata()
				})
			},
			lingqus() {
				if (this.value == '') {

					uni.showToast({
						title: '请选择发放银行',
						icon: "error"
					}); //弹出提示框
				} else {
					uni.showLoading({
						title: '领取中，请稍等',
						mask: true
					});
					ljjLq({
						openid: this.openid,
						type: 3,
						id: this.idx,
						account: uni.getStorageSync('openidHF'),
						accountType: 2,
						bankType: this.value

					}).then((res) => {
						uni.showToast({
							title: res.msg,
							icon: "none"
						}); //弹出提示框
						this.shows = false
						this.getdata()
					})
				}

			},
			change(index) {
				window.scrollTo(0, 0)
				if (!uni.getStorageSync('openid')) {
					uni.showToast({
						title: '请先登录',
						icon: "none"
					}); //弹出提示框

				} else {
					this.current = index;
					this.getdata()
				}

			},
			//推出登录
			loginout() {

				this.openid = ''
				this.xmlydata = []
				this.tldata == []
			},
			//获取验证码
			getCode() {
				sendSms({
					mobile: this.mobile,

				}).then((res) => {
					this.disabled = true
					this.getCodeText = "发送中..." //发送验证码
					this.getCodeisWaiting = true;
					setTimeout(() => {
						//this.$common.msg('验证码已发送')
						uni.showToast({
							title: '验证码已发送',
							icon: "none"
						}); //弹出提示框
						this.setTimer(); //调用定时器方法
					}, 1000)
				})
			},
			setTimer() {
				let holdTime = 60; //定义变量并赋值
				this.getCodeText = "重新获取(60)"
				//setInterval（）是一个实现定时调用的函数，可按照指定的周期（以毫秒计）来调用函数或计算表达式。
				//setInterval方法会不停地调用函数，直到 clearInterval被调用或窗口被关闭。
				this.Timer = setInterval(() => {
					if (holdTime <= 0) {
						this.disabled = false
						this.getCodeisWaiting = false;
						this.getCodeBtnColor = "#ffffff";
						this.getCodeText = "获取验证码"
						clearInterval(this.Timer); //清除该函数
						return; //返回前面
					}
					this.getCodeText = "重新获取(" + holdTime + ")"
					holdTime--;
				}, 1000)
			},
			getdatas() {

				console.log(this.current)
				ljjList({
					openid: this.openid,
					type: 3,
					proType: 2
				}).then((res) => {
					console.log(res)
					this.xmlydata = res.data


					for (var i in this.xmlydata) {
						if (this.xmlydata[i].status == 0) {
							if (Date.now() < this.xmlydata[i].starttime * 1000) {
								this.xmlydata[i].status = '7'
							}
						}

						this.xmlydata[i].starttime = moment(this.xmlydata[i].starttime * 1000).format(
							"YYYY-MM-DD")
						this.xmlydata[i].endtime = moment(this.xmlydata[i].endtime * 1000).format("YYYY-MM-DD")
					}

				})


				ljjList({
					openid: this.openid,
					type: 3,
					proType: 1
				}).then((res) => {
					console.log(res)
					this.tldata = res.data
					for (var i in this.tldata) {
						if (this.tldata[i].status == 0) {
							if (Date.now() < this.tldata[i].starttime * 1000) {
								this.tldata[i].status = '7'
							}
						}

						this.tldata[i].starttime = moment(this.tldata[i].starttime * 1000).format(
							"YYYY-MM-DD")
						this.tldata[i].endtime = moment(this.tldata[i].endtime * 1000).format("YYYY-MM-DD")
					}
				})


				ljjList({
					openid: this.openid,
					type: 3,
					proType: 3
				}).then((res) => {
					console.log(res)
					this.tldata = res.data
					for (var i in this.tldata) {
						if (this.tldata[i].status == 0) {
							if (Date.now() < this.tldata[i].starttime * 1000) {
								this.tldata[i].status = '7'
							}
						}

						this.tldata[i].starttime = moment(this.tldata[i].starttime * 1000).format(
							"YYYY-MM-DD")
						this.tldata[i].endtime = moment(this.tldata[i].endtime * 1000).format("YYYY-MM-DD")
					}
				})

			},
			//点击喜马拉雅获取数据
			getxmly() {
				ljjList({
					openid: this.openid,
					type: 3,
					proType: this.proType
				}).then((res) => {
					console.log(res)
					this.xmlydata = res.data


					for (var i in this.xmlydata) {
						if (this.xmlydata[i].status == 0) {
							if (Date.now() < this.xmlydata[i].starttime * 1000) {
								this.xmlydata[i].status = '7'
							}
						}

						this.xmlydata[i].starttime = moment(this.xmlydata[i].starttime * 1000).format(
							"YYYY-MM-DD")
						this.xmlydata[i].endtime = moment(this.xmlydata[i].endtime * 1000).format("YYYY-MM-DD")
					}

				})
			},
			//d点击非喜马拉雅数据
			gettldata() {
				ljjList({
					openid: this.openid,
					type: 3,
					proType: this.proType
				}).then((res) => {
					console.log(res)
					this.tldata = res.data
					for (var i in this.tldata) {
						if (this.tldata[i].status == 0) {
							if (Date.now() < this.tldata[i].starttime * 1000) {
								this.tldata[i].status = '7'
							}
						}

						this.tldata[i].starttime = moment(this.tldata[i].starttime * 1000).format(
							"YYYY-MM-DD")
						this.tldata[i].endtime = moment(this.tldata[i].endtime * 1000).format("YYYY-MM-DD")
					}
				})
			},
			getdata() {
				this.proType = 2
				this.gettldata()


			},


			getdt() {
				ljjList({
					openid: this.openid,
					type: 3,
					proType: 3
				}).then((res) => {
					console.log(res)
					this.tldata = res.data
					for (var i in this.tldata) {
						if (this.tldata[i].status == 0) {
							if (Date.now() < this.tldata[i].starttime * 1000) {
								this.tldata[i].status = '7'
							}
						}

						this.tldata[i].starttime = moment(this.tldata[i].starttime * 1000).format(
							"YYYY-MM-DD")
						this.tldata[i].endtime = moment(this.tldata[i].endtime * 1000).format("YYYY-MM-DD")
					}
				})
			},

			//点击登录
			login() {
				if (this.code == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入验证码',
						duration: 2000
					});
				} else if (this.mobie == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入手机号',
						duration: 2000
					});
				} else {
					checkSms({
						mobile: this.mobile,
						captcha: this.code,
						type: 3
					}).then((res) => {
						this.show = false
						uni.setStorageSync('openid', res.data.openid)
						uni.setStorageSync('mobile', res.data.mobile)
						this.mobile = uni.getStorageSync('mobile')
						this.openid = uni.getStorageSync('openid')
						this.getdata()
					})
				}

			}
		},
		onLoad(option) {
			getshenhe({
				pid: 2,
				ver: 48
			}).then((res) => {
				console.log(res)
				this.is = res.data.is
			})
			if (uni.getStorageSync('openid')) {
				this.openid = uni.getStorageSync('openid')
				this.getdata()
			}
			if (uni.getStorageSync('mobile')) {
				this.mobile = uni.getStorageSync('mobile')

			}
			//#ifdef MP-WEIXIN
			if (!uni.getStorageSync('openidHF')) {

				uni.login({
					provider: 'weixin', //使用微信登录
					success: function(loginRes) {
						console.log(loginRes.code);
						// uni.setStorageSync('codexs', loginRes.code)
						wxLogins({
							code: loginRes.code,
							type: 3,
							proid: ""
						}).then((resx) => {
							console.log(resx.data.openidH5)
							uni.setStorageSync('openidHF', resx.data.openidH5)

							console.log(resx, 1111)
						})

					}
				});
			}

			//#endif

		},
		watch: {

		},
		computed: {

		}
	}
</script>

<style scoped lang='scss'>
	.yk {
		color: rgb(91, 140, 207);
		font-size: 36rpx;
		font-weight: bold;
	}

	.cx {
		width: 136rpx;
		height: 50rpx;
		background: linear-gradient(90deg, #5B8CCF, #6570CB);
		border: 2px solid #FFFFFF;
		border-radius: 25rpx;
		line-height: 50rpx;
		color: #FFFFFF;
		margin-top: 15rpx;
	}

	.money {
		font-size: 90rpx;
		color: white;
	}

	.unit {
		margin-top: 50rpx;
		color: white;
		font-size: 40rpx;
	}

	.box {
		background-color: #FAFAFA;
		min-height: 100vh;
	}

	.title {

		font-size: 34rpx;

		font-weight: 400;
		color: #1A1A1A;
		margin-top: 50rpx;

	}

	.boss1 {
		background-color: white;
		width: 662rpx;
		border-radius: 12rpx;
		margin: 0 auto;

		text-align: center;
		position: relative;
	}

	.boss {
		background-color: white;
		width: 662rpx;

		margin: 0 auto;

		text-align: center;
		position: relative;


	}
</style>